<script setup>
import { computed, h, nextTick, reactive, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import AddLink from '@/components/icons/AddLink.vue'
import { NButton, NIcon, useThemeVars } from 'naive-ui'
import { types, types as redisTypes } from '@/consts/support_redis_type.js'
import EditableTableColumn from '@/components/common/EditableTableColumn.vue'
import { isEmpty, size } from 'lodash'
import useDialogStore from 'stores/dialog.js'
import { decodeTypes, formatTypes } from '@/consts/value_view_type.js'
import useBrowserStore from 'stores/browser.js'
import LoadList from '@/components/icons/LoadList.vue'
import LoadAll from '@/components/icons/LoadAll.vue'
import IconButton from '@/components/common/IconButton.vue'
import ContentEntryEditor from '@/components/content_value/ContentEntryEditor.vue'
import FormatSelector from '@/components/content_value/FormatSelector.vue'
import Edit from '@/components/icons/Edit.vue'
import ContentSearchInput from '@/components/content_value/ContentSearchInput.vue'
import { ClipboardSetText } from 'wailsjs/runtime/runtime.js'
import { formatBytes } from '@/utils/byte_convert.js'

const i18n = useI18n()
const themeVars = useThemeVars()

const props = defineProps({
  name: String,
  db: Number,
  keyPath: String,
  keyCode: {
    type: Array,
    default: null,
  },
  ttl: {
    type: Number,
    default: -1,
  },
  value: {
    type: Array,
    default: () => [],
  },
  size: Number,
  length: Number,
  format: {
    type: String,
    default: formatTypes.RAW,
  },
  decode: {
    type: String,
    default: decodeTypes.NONE,
  },
  end: Boolean,
  loading: Boolean,
})

const emit = defineEmits(['loadmore', 'loadall', 'reload', 'match'])

/**
 *
 * @type {ComputedRef<string|number[]>}
 */
const keyName = computed(() => {
  return !isEmpty(props.keyCode) ? props.keyCode : props.keyPath
})

const browserStore = useBrowserStore()
const dialogStore = useDialogStore()
const keyType = redisTypes.ZSET
const currentEditRow = reactive({
  no: 0,
  score: 0,
  value: null,
  format: formatTypes.RAW,
  decode: decodeTypes.NONE,
})

const inEdit = computed(() => {
  return currentEditRow.no > 0
})
const fullEdit = ref(false)

// const scoreFilterOption = ref(null)
const scoreColumn = computed(() => ({
  key: 'score',
  title: () => i18n.t('common.score'),
  align: 'center',
  titleAlign: 'center',
  resizable: true,
  sorter: (row1, row2) => row1.s - row2.s,
  // filterOptionValue: scoreFilterOption.value,
  // filter(value, row) {
  //     const score = parseFloat(row.s)
  //     if (isNaN(score)) {
  //         return true
  //     }
  //
  //     const regex = /^(>=|<=|>|<|=|!=)?(\d+(\.\d*)?)?$/
  //     const matches = value.match(regex)
  //     if (matches) {
  //         const operator = matches[1] || ''
  //         const filterScore = parseFloat(matches[2] || '')
  //         if (!isNaN(filterScore)) {
  //             switch (operator) {
  //                 case '>=':
  //                     return score >= filterScore
  //                 case '<=':
  //                     return score <= filterScore
  //                 case '>':
  //                     return score > filterScore
  //                 case '<':
  //                     return score < filterScore
  //                 case '=':
  //                     return score === filterScore
  //                 case '!=':
  //                     return score !== filterScore
  //             }
  //         }
  //     } else {
  //         return !!~row.v.indexOf(value.toString())
  //     }
  //     return true
  // },
  render: (row) => {
    return row.ss || row.s
  },
}))

const isCode = computed(() => {
  return props.format === formatTypes.JSON || props.format === formatTypes.UNICODE_JSON
})
const valueFilterOption = ref(null)
const valueColumn = computed(() => ({
  key: 'value',
  title: () => i18n.t('common.value'),
  align: isCode.value ? 'left' : 'center',
  titleAlign: 'center',
  resizable: true,
  ellipsis: isCode.value
    ? false
    : {
        tooltip: {
          style: {
            maxWidth: '50vw',
            maxHeight: '50vh',
          },
          scrollable: true,
        },
      },
  filterOptionValue: valueFilterOption.value,
  className: inEdit.value ? 'clickable' : '',
  filter(value, row) {
    if (row.dv) {
      return !!~row.dv.indexOf(value.toString())
    }
    return !!~row.v.indexOf(value.toString())
  },
  // sorter: (row1, row2) => row1.value - row2.value,
  render: (row) => {
    if (isCode.value) {
      return h('pre', {}, row.dv || row.v)
    }
    return row.dv || row.v
  },
}))

const startEdit = async (no, score, value) => {
  currentEditRow.no = no
  currentEditRow.score = score
  currentEditRow.value = value
  currentEditRow.decode = props.decode
  currentEditRow.format = props.format
}

const saveEdit = async (field, value, decode, format) => {
  try {
    const score = parseFloat(field)
    const row = props.value[currentEditRow.no - 1]
    if (row == null) {
      throw new Error('row not exists')
    }

    if (isEmpty(value)) {
      value = currentEditRow.value
    }

    const { success, msg } = await browserStore.updateZSetItem({
      server: props.name,
      db: props.db,
      key: keyName.value,
      value: row.v,
      newValue: value,
      score,
      decode,
      format,
    })
    if (success) {
      $message.success(i18n.t('interface.save_value_succ'))
    } else {
      $message.error(msg)
    }
  } catch (e) {
    $message.error(e.message)
  }
}

const resetEdit = () => {
  currentEditRow.no = 0
  currentEditRow.score = 0
  currentEditRow.value = null
  if (currentEditRow.format !== props.format || currentEditRow.decode !== props.decode) {
    nextTick(() => onFormatChanged(currentEditRow.decode, currentEditRow.format))
  }
}

const actionColumn = {
  key: 'action',
  title: () => i18n.t('interface.action'),
  width: 120,
  align: 'center',
  titleAlign: 'center',
  fixed: 'right',
  render: (row, index) => {
    return h(EditableTableColumn, {
      editing: false,
      bindKey: row.v,
      onCopy: async () => {
        try {
          const succ = await ClipboardSetText(row.v)
          if (succ) {
            $message.success(i18n.t('interface.copy_succ'))
          }
        } catch (e) {
          $message.error(e.message)
        }
      },
      onEdit: () => startEdit(index + 1, row.s, row.v),
      onDelete: async () => {
        try {
          const { success, msg } = await browserStore.removeZSetItem({
            server: props.name,
            db: props.db,
            key: keyName.value,
            value: row.v,
          })
          if (success) {
            $message.success(i18n.t('dialogue.delete.success', { key: row.v }))
          } else {
            $message.error(msg)
          }
        } catch (e) {
          $message.error(e.message)
        }
      },
    })
  },
}

const columns = computed(() => {
  if (!inEdit.value) {
    return [
      {
        key: 'no',
        title: '#',
        width: 80,
        align: 'center',
        titleAlign: 'center',
        render: (row, index) => {
          return index + 1
        },
      },
      valueColumn.value,
      scoreColumn.value,
      actionColumn,
    ]
  } else {
    return [
      {
        key: 'no',
        title: '#',
        width: 80,
        align: 'center',
        titleAlign: 'center',
        render: (row, index) => {
          if (index + 1 === currentEditRow.no) {
            // editing row, show edit state
            return h(NIcon, { size: 16, color: 'red' }, () => h(Edit, { strokeWidth: 5 }))
          } else {
            return index + 1
          }
        },
      },
      valueColumn.value,
    ]
  }
})

const entries = computed(() => {
  const len = size(props.value)
  return `${len} / ${Math.max(len, props.length)}`
})

const loadProgress = computed(() => {
  const len = size(props.value)
  return (len * 100) / Math.max(len, props.length)
})

const showMemoryUsage = computed(() => {
  return !isNaN(props.size) && props.size > 0
})

const onAddRow = () => {
  dialogStore.openAddFieldsDialog(props.name, props.db, props.keyPath, props.keyCode, types.ZSET)
}

const onFilterInput = (val) => {
  valueFilterOption.value = val
}

const onMatchInput = (matchVal, filterVal) => {
  valueFilterOption.value = filterVal
  emit('match', matchVal)
}

const onUpdateFilter = (filters, sourceColumn) => {
  valueFilterOption.value = filters[sourceColumn.key]
}

const onFormatChanged = (selDecode, selFormat) => {
  emit('reload', selDecode, selFormat)
}

const searchInputRef = ref(null)
defineExpose({
  reset: () => {
    resetEdit()
    searchInputRef.value?.reset()
  },
})
</script>

<template>
  <div class="content-wrapper flex-box-v">
    <slot name="toolbar" />
    <div class="tb2 value-item-part flex-box-h">
      <div class="flex-box-h" style="max-width: 50%">
        <content-search-input ref="searchInputRef" @filter-changed="onFilterInput" @match-changed="onMatchInput" />
      </div>
      <div class="flex-item-expand"></div>
      <n-button-group>
        <icon-button
          :disabled="props.end || props.loading"
          :icon="LoadList"
          border
          size="18"
          t-tooltip="interface.load_more_entries"
          @click="emit('loadmore')" />
        <icon-button
          :disabled="props.end || props.loading"
          :icon="LoadAll"
          border
          size="18"
          t-tooltip="interface.load_all_entries"
          @click="emit('loadall')" />
      </n-button-group>
      <n-button :focusable="false" plain @click="onAddRow">
        <template #icon>
          <n-icon :component="AddLink" size="18" />
        </template>
        {{ $t('interface.add_row') }}
      </n-button>
    </div>
    <!-- loaded progress -->
    <n-progress
      :border-radius="0"
      :color="props.end ? '#0000' : themeVars.primaryColor"
      :height="2"
      :percentage="loadProgress"
      :processing="props.loading"
      :show-indicator="false"
      status="success"
      type="line" />
    <div class="value-wrapper value-item-part flex-box-h flex-item-expand">
      <!-- table -->
      <n-data-table
        :bordered="false"
        :bottom-bordered="false"
        :columns="columns"
        :data="props.value"
        :loading="props.loading"
        :row-key="(row) => row.v"
        :single-column="true"
        :single-line="false"
        class="flex-item-expand"
        flex-height
        size="small"
        striped
        virtual-scroll
        @update:filters="onUpdateFilter" />

      <!-- edit pane -->
      <div
        v-show="inEdit"
        :style="{ position: fullEdit ? 'static' : 'relative' }"
        class="entry-editor-container flex-item-expand"
        style="width: 100%">
        <content-entry-editor
          v-model:decode="currentEditRow.decode"
          v-model:format="currentEditRow.format"
          v-model:fullscreen="fullEdit"
          :field="currentEditRow.score"
          :field-label="$t('common.score')"
          :key-path="props.keyPath"
          :show="inEdit"
          :value="currentEditRow.value"
          :value-label="$t('common.value')"
          class="flex-item-expand"
          style="width: 100%"
          @close="resetEdit"
          @save="saveEdit" />
      </div>
    </div>
    <div class="value-footer flex-box-h">
      <n-text v-if="!isNaN(props.length)">{{ $t('interface.entries') }}: {{ entries }}</n-text>
      <n-divider v-if="showMemoryUsage" vertical />
      <n-text v-if="showMemoryUsage">{{ $t('interface.memory_usage') }}: {{ formatBytes(props.size) }}</n-text>
      <div class="flex-item-expand"></div>
      <format-selector
        v-show="!inEdit"
        :decode="props.decode"
        :disabled="inEdit"
        :format="props.format"
        @format-changed="onFormatChanged" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.value-footer {
  border-top: v-bind('themeVars.borderColor') 1px solid;
  background-color: v-bind('themeVars.tableHeaderColor');
}
</style>
